<template>
  <div class="container">
    <el-table :data="tableData" border style="width: 100%" ref="Table" height="55vh">
      <el-table-column type="index" width="50" label="序号" align="center"> </el-table-column>
      <el-table-column v-for="item of tableProps" :key="item.props" :prop="item.prop" :label="item.title"
        :width="item.width">
        <template slot-scope="{ row }">
          <div v-if="item.prop === 'fieldType'">
            <el-tag size="small" type="info" v-if="row.fieldType == 0">业务字段</el-tag>
            <el-tag size="small" type="info" v-else-if="row.fieldType == 1">内置字段</el-tag>
            <el-tag size="mismallni" type="info" v-else-if="row.fieldType == 2">自定义字段</el-tag>
          </div>
          <div v-else-if="item.prop === 'dataType'">
            <el-tag size="small">{{ row.dataType }}</el-tag>
          </div>
          <div v-else>{{ row[item.prop] }}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'CustomTable',
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    label: {
      type: String,
      default: '0',
    },
  },

  data() {
    return {
      tableProps: [
        { title: '字段标题', prop: 'fieldTitle', width: '', checked: true },
        { title: '数据库字段', prop: 'fieldName', width: '', checked: true },
        { title: '数据类型', prop: 'dataType', width: '', checked: true },
        { title: '数据长度', prop: 'dataLength', width: '', checked: true },
        { title: '字段类型', prop: 'fieldType', width: '', checked: true },
      ],
    }
  },

  mounted() { },

  methods: {},
}
</script>

<style lang="less" scoped>
.container {
  .box-card {
    height: 100%;
  }
}

.el-table {
  width: 99.9% !important; //不让它到临界值，这样可避免自动计算
}

.el-table__header,
.el-table__body {
  overflow: hidden;
  width: 99.9% !important;
}
</style>
